<template>
  <div class="haves">
    <div class="left">
      <van-icon name="arrow-left" @click="$router.back()" />
      <div class="center">我的分享面经</div>
    </div>
    <van-search
      v-model="value"
      @click="$router.push('/serch')"
      cplaceholder="请输入搜索关键词"
    />
    <!-- 文章详情 -->
    <div class="article" v-for="(item, index) in listst" :key="index">
      <h4>{{ item.title }}</h4>
      <p>
        {{ item.content }}
      </p>
      <img :src="`http://localhost:1337${item.author.avatar}`" alt="" /><span
        >妮妮</span
      >

      <div class="right">
        <span>10分钟前</span>
        <span> <van-icon name="more-o">1</van-icon></span>
        <span><van-icon name="good-job-o">46</van-icon></span>
      </div>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="到底了">
    </van-list>
  </div>
</template>

<script>
import { getshare } from "../../api/find";
export default {
  data() {
    return {
      listst: [],
      loading: true,
      finished: true,
    };
  },
  async created() {
    const res = await getshare();
    console.log(res);
    this.listst = res.data.data.list;
    this.loading = false;
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.haves {
  .left {
    display: flex;
    padding: 15px 0;
    .center {
      margin: 0 auto;
      font-size: 18px;
    }
  }
  .article {
    padding: 10px 0;
    span {
      font-size: 14px;
      color: #ccc;
    }
    p {
      padding: 10px 0;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    h4 {
      margin-left: 10px;
      font-size: 18px;
    }
    img {
      padding-right: 5px;
      width: 20px;
      height: 20px;
      border-radius: 10px;
    }
    .right {
      float: right;
      span {
        color: #ccc;
        margin: 0 10px;
        font-size: 14px;
      }
    }
  }
}
</style>